<template>
  <div>
    <nav-bar title="固定巡检统计"></nav-bar>
    <div class="realTimeStatistical maxinBox">
      <div class="plr10 backgroundfff" style="padding: 10px;">
        <div class="title">
          <div>实时检查</div>
        </div>
        <van-row class="todayShow center" v-if="fixedStatistical">
          <van-col :span="8">
            <div>
              <label class="fontSize16">{{fixedStatistical.taskCount}}</label>
              <div class="color999 fontSize14">今日巡检任务</div>
            </div>
          </van-col>
          <van-col :span="8">
           <div>
             <label class="fontSize16">{{fixedStatistical.completedRate}}%</label>
             <div class="color999 fontSize14">今日巡检完成率</div>
           </div>
          </van-col>
          <van-col :span="8">
            <div>
              <label class="fontSize16">{{fixedStatistical.troubleRate}}%</label>
              <div class="color999 fontSize14">巡检异常率</div>
            </div>
          </van-col>
        </van-row>
      </div>
      <div class="plr10 backgroundfff marginTop5">
        <div class="title">
          <div>今日异常点位列表</div>
        </div>
      </div>
      <div class="center backgroundfff">
        <van-row class="tableTitle fontSize14" style="background-color: #F6F6F6">
          <van-col :span="6">点位名称</van-col>
          <van-col :span="6">巡更人员</van-col>
          <van-col :span="6">巡更时间</van-col>
          <van-col :span="6">整改状态</van-col>
        </van-row>
        <van-row class="tableContent fontSize14" v-for="(item, index) in dataList" :key="index">
          <van-col :span="6">{{item.pointName}}</van-col>
          <van-col :span="6">{{item.handlerName}}</van-col>
          <van-col :span="6">{{item.taskDate | formDate('YYYY-MM-DD')}}</van-col>
          <van-col :span="6">{{item.reformCompleted}}</van-col>
        </van-row>
      </div>
    </div>
  </div>
</template>

<script>
  import MyEcharts from './components/MyChart.vue'
  import fixedInspectionAPI from '../../../../api/workAPI/fixedInspectionAPI.js'
  export default {
    components: {
      MyEcharts
    },
    computed: {
      text() {
        return this.currentRate.toFixed(0) + '%';
      },
    },
    data() {
      return {
        taskCount: {
          '0%': '#00FF0C',
          '100%': '#00FFA2',
        },
        completedRate: {
          '0%': '#FFA800',
          '100%': '#FFCC00',
        },
        troubleRate: {
          '0%': '#FF6600',
          '100%': '#FF0600',
        },
        fixedStatistical: null,
        currentRate: 0,
        dataList: [],
      }
    },
    methods:{
      more() {
        this.$router.push({
          path:'/TypeStatistical'
        })
      },
      // 固定巡检统计
      getFixedStatistical() {
        let projectId = localStorage.getItem('projectId')
        fixedInspectionAPI.getFixedStatistical(projectId).then(res => {
          this.fixedStatistical = res
          this.dataList = res.troublePointList
        })
      }
    },
    mounted() {
      this.getFixedStatistical()
    }
  }
</script>

<style scoped lang="scss">
  .title{
    padding: 0.625rem;
    font-size: 0.875rem;
    div{
      margin: 0.3125rem;
      border-left: 0.125rem solid #1577FF;
      padding-left: 0.3125rem;
    }
  }
  .tableTitle{
    padding: 0.625rem 0.9375rem;
    background-color: #F6F6F6;
    color: #999;
  }
  .tableContent:nth-child(2n){
    padding: 0.625rem 0.9375rem;
    color: #666;
  }
  .tableContent:nth-child(2n + 1){
    padding: 0.625rem 0.9375rem;
    color: #666;
    background-color: #F6FAFF;
  }
</style>
